<template>
  <div class="draggable_content">
    <!-- <div class="header">
      <span>{{ props.title }}</span>
    </div> -->
    <div class="content">
      <draggable v-model="data.myArray" group="people" @start="drag = true" @end="drag = false" item-key="id">
        <template #item="{ element, index }">
          <div>
            <div
              class="file"
              @click="handelClickFirstFile(element, index)"
              :style="{ paddingLeft: element.childFolder.length <= 0 ? '30px' : '' }"
              :class="data.num == index ? 'active' : ''"
            >
              <span v-if="element.childFolder.length > 0">
                <el-icon size="20" color="#909399" v-if="element.isExpand"><CaretBottom /></el-icon>
                <el-icon size="20" color="#909399" v-else><CaretTop /></el-icon>
              </span>
              <img :src="fileImg" alt="" />
              <div class="file_operate">
                <span>
                  <el-input v-if="element.isEdit" v-model="element.folderName" @blur="handelBlur(element)"></el-input>
                  <span v-else>{{ element.folderName }}</span>
                </span>
                <!-- <div class="file_operate_right">
                  <img :src="move" alt="" />
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <img :src="more" alt="" />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          command="a"
                          v-for="(item, i) in data.operateList"
                          :key="i"
                          @click="handelClickOperate(element, item)"
                          >{{ item.name }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div> -->
              </div>
            </div>
            <div v-if="element.isExpand">
              <draggable v-model="element.childFolder" @start="drag = true" @end="drag = false" item-key="id">
                <template #item="{ element, index }">
                  <div
                    class="child_file"
                    @click="handelClickChildItem(element, index)"
                    :class="element.isActive ? 'active1' : ''"
                  >
                    <img :src="fileImg" alt="" />
                    <div class="file_operate">
                      <span>
                        <el-input v-if="element.isEdit" v-model="element.folderName" @blur="handelBlur(element)"></el-input>
                        <span v-else>{{ element.folderName }}</span>
                      </span>
                      <!-- <div class="file_operate_right">
                        <img :src="move" alt="" />
                        <el-dropdown>
                          <span class="el-dropdown-link">
                            <img :src="more" alt="" />
                          </span>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item
                                command="a"
                                v-for="(item, i) in data.operateListChildFile"
                                :key="i"
                                @click="handelClickOperate(element, item)"
                                >{{ item.name }}</el-dropdown-item
                              >
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div> -->
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </template>
      </draggable>
    </div>
    <div class="add_file">
      <!-- <el-button :icon="Plus" type="primary" @click="handelClickAddFile">新建文件夹</el-button> -->
    </div>
  </div>
</template>
<script setup>
// 资源导入
import { reactive, defineProps, defineEmits, onMounted } from "vue";
import draggable from "vuedraggable";
import { CaretBottom, CaretTop, Plus } from "@element-plus/icons-vue";
import fileImg from "@/static/images/folder.png";
import more from "@/static/images/more.png";
import move from "@/static/images/move.png";
import { ElMessage } from "element-plus";
// api
import { createFolder, filieList, deleteFolder, copyFolder } from "@/apis/createFile/index.js";
// 变量定义
const emits = defineEmits("clickItem");
const props = defineProps({
  title: {
    type: String,
    default() {
      return "";
    }
  }
});
const data = reactive({
  // 选中的数据
  selectedData: {},
  num: -1,
  childNum: -1,
  // 拖动列表数据
  myArray: [],
  operateList: [
    { id: 1, name: "添加子文件", command: "a" },
    { id: 2, name: "编辑", command: "b" },
    { id: 3, name: "复制", command: "c" },
    { id: 4, name: "删除", command: "d" }
  ],
  operateListChildFile: [
    { id: 2, name: "编辑", command: "b" },
    { id: 3, name: "复制", command: "c" },
    { id: 4, name: "删除", command: "d" }
  ],
  engineeringTypeList: []
});
// 方法定义
const handelClickFirstFile = (item, index) => {
  console.log(item);
  // 是否打开当前项
  item.isExpand = !item.isExpand;
  // 赋值给选中的数据
  data.selectedData = item;
  data.num = index;
};
// 新建文件
const handelClickAddFile = () => {
  createFolder({ showOrder: data.num == -1 ? data.myArray.length : data.num })
    .then(() => {
      console.log(1);
      getFilieList();
    })
    .catch(err => {
      console.log(err);
    });
};
// 获取文件列表
const getFilieList = () => {
  filieList().then(res => {
    console.log(res);
    res.data.map(it => {
      it.isExpand = false;
      it.isEdit = false;
      it.childFolder.map(cit => {
        cit.isActive = false;
        cit.isEdit = false;
      });
    });
    data.myArray = res.data;
  });
};
// 更多操作
const handelClickOperate = (element, item) => {
  const command = item.command;
  if (command === "b") {
    element.isEdit = true;
  } else if (command === "a") {
    createFolder({ parentId: element.folderId, showOrder: data.myArray.length }).then(() => {
      getFilieList();
    });
  } else if (command === "d") {
    deleteFolder(element.folderId)
      .then(() => {
        console.log("删除成功");
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        getFilieList();
      })
      .catch(err => {
        console.log(err);
      });
  } else if (command === "c") {
    copyFolder(element.folderId).then(() => {
      ElMessage({
        type: "success",
        message: "复制成功"
      });
      getFilieList();
    });
  }
  console.log(element);
};
// 失去焦点时保存当前文件的名称并不让在编辑
const handelBlur = element => {
  element.isEdit = false;
  createFolder(element).then(() => {
    getFilieList();
  });
};
const handelClickChildItem = (item, i) => {
  console.log(item, i);
  data.childNum = i;
  item.isActive = true;
  data.myArray.map(it => {
    it.childFolder.map(cit => {
      cit.isActive = false;
      if (cit.folderId === item.folderId) {
        cit.isActive = true;
      }
    });
  });
  emits("clickItem", item);
};
// 生命周期
onMounted(() => {
  getFilieList();
});
// 监听
</script>
<style scoped lang="scss">
.active {
  background-color: #d9e8ff !important;
}
.active1 {
  background-color: #d9e8ff !important;
}
.file_operate {
  display: flex;
  justify-content: space-between;
  width: 100%;
  &_right {
    display: flex;
    align-items: center;
  }
}
.draggable_content {
  padding: 20px;
  width: 282px;
  height: calc(100% - 40px);
  background-color: #fff;
  // border-radius: 8px;
  overflow: hidden;
  // border-right: 1px solid #c2d4e8;
  box-sizing: border-box;
  .header {
    font-size: 18px;
    color: #131414;
    // padding: 20px;
    overflow: hidden;
    span::before {
      content: "";
      width: 6px;
      height: 6px;
      position: absolute;
      left: -14px;
      background-color: #409eff;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
    span {
      margin-left: 20px;
      position: relative;
    }
  }
}
// 拖拽外层内容css
.content {
  margin-top: 20px;
  height: calc(100% - 90px);
  overflow: scroll;
}
.file {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  img {
    width: 16px;
  }
  span {
    margin-left: 10px;
  }
}
.child_file {
  padding-left: 40px;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #000;
  box-sizing: border-box;
  span {
    margin-left: 10px;
  }
  img {
    width: 16px;
  }
}
.add_file {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
</style>
